<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		html,body{
			margin:0;
			padding: 0;
		}
		#mycanvas_container{
			overflow: hidden;
			text-align: center;
		}
		
	</style>
	</head>
	<body>
		<div id="mycanvas_container"></div>
		<button onclick="zoomIn()">放大</button>
		<button onclick="zoomOut()">缩小</button>
		<button onclick="zoomActual()">复原</button>
	</body>
	<script type="module">	
		import { jmGraph } from "../../index.js";
		import jmResize from '../../src/shapes/jmResize.js';

        var container = document.getElementById('mycanvas_container');
        
        //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
		var g = window.graph = jmGraph.create('mycanvas_container', {
			width: 800,
			height: 600,
			mode: '2d',
			autoRefresh: true,
			style: {
				fill: '#000',
			}
		});
		init(g);
		
			
		function init(g){
			//g.style.fill = '#000'; //画布背景
			var style = {
                stroke: 'red',
                fill: 'yellow',
                lineWidth: 2, //边线宽
				rotation: {
					angle: Math.PI / 3
				},
                //小方块样式
                rectStyle: {
                    stroke: 'green', //小方块边颜色
                    fill: '#ccc',//小方块填充色
                    lineWidth: 1.1, //小方块线宽
                    close: true
                }
			};
			//style.opacity = 0.2;		

			//创建一个resize
            var resize = g.createShape(jmResize, {
                style: style,
                position: {x:200, y:150},
                width: 120,
                height: 80
			});	
			//大小改变事件
			resize.on('resize', function() {
				console.log( Date.now(), arguments);
			});	
			resize.canMove(true);
            g.children.add(resize);           
            
			g.on('update', (time) => {
				//style.rotation.angle += 0.01;
				//g.needUpdate = true;
			});
		}

		
	</script>
	<script>
		var curentScale = {x: 1, y: 1};
		function zoomIn() {
			window.graph && window.graph.scale(1.1, 1.1);
			//window.graph && window.graph.resize(window.graph.width * 1.1, window.graph.height * 1.1);
			//curentScale.x += 0.1;
			//curentScale.y += 0.1;
			//window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
		}

		function zoomOut() {
			window.graph && window.graph.scale(0.9, 0.9);
			//window.graph && window.graph.resize(window.graph.width * 0.9, window.graph.height * 0.9);
			//curentScale.x -= 0.1;
			//curentScale.y -= 0.1;
			//window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);

		}

		function zoomActual() {
			window.graph && window.graph.zoomActual();
			//window.graph && window.graph.resize(800, 600);
			//curentScale.x = 1;
			//curentScale.y = 1;
			//window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);

		}
	</script>
</html>